<template>
  <!-- 登录 -->
  <div class="login">
    <h1>欢迎登录</h1>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="请填写测试用户名admin"
        :rules="[{required: true, message: '请填写用户名'}]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请填写测试用户名123456"
        :rules="[{required: true, message: '请填写密码'}]"
      />
      <div class="register">
        <div class="registers" @click="registers">点击注册</div>
        <div class="forget" @click="forget">忘记密码</div>
      </div>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          submit-on-enter="true"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// import request from '../../utils/request'
import { Toast } from 'vant'
import store from '../../store'
import { authLogin } from '../../api/login'
export default {
  name: 'car',
  components: {},
  data () {
    return {
      username: '',
      password: '',
      token: '',
      avatarUrl: '',
      nickName: ''
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {},
  created () {},
  methods: {
    onSubmit (values) {
      // this.logins()
      authLogin(values).then((res) => {
        console.log(values)
        Toast(res.data.errmsg)
        // console.log(res.data.errmsg)
        //  解构存储
        const { data } = res.data
        this.token = data.token
        this.avatarUrl = data.userInfo.avatarUrl
        this.nickName = data.userInfo.nickName
        // 存储数据在本地
        localStorage.setItem('token', this.token)
        localStorage.setItem('avatarUrl', this.avatarUrl)
        localStorage.setItem('nickName', this.nickName)
        const resData = JSON.stringify(res.data)
        localStorage.setItem('res', resData)
        // 存储 vuex
        store.dispatch('login', data)
        // 判断跳转
        // 获取之前存储的数据
        // console.log(localStorage.getItem('token'))
        if (localStorage.getItem('token') === this.token) {
          // console.log('登录成功')
          this.$router.push('/')
        } else {
          // console.log('登录失败')
          alert('账号密码错误')
        }
      })
    },
    registers () {
      console.log('点击注册')
      this.$router.push('/login/registerGetCode')
    },
    forget () {
      console.log('忘记密码')
      this.$router.push('/login/forget')
    }
    // logins () {
    //   request.post('auth/login', { username: this.username, password: this.password }).then(res => {
    //     // 解构存储
    //     const { data } = res.data
    //     this.token = data.token
    //     this.avatarUrl = data.userInfo.avatarUrl
    //     this.nickName = data.userInfo.nickName
    //     // 存储数据在本地
    //     localStorage.setItem('token', this.token)
    //     localStorage.setItem('avatarUrl', this.avatarUrl)
    //     localStorage.setItem('nickName', this.nickName)
    //     // 存储 vuex
    //     store.dispatch('login', data)
    //     // 判断跳转
    //     // 获取之前存储的数据
    //     // console.log(localStorage.getItem('token'))
    //     if (localStorage.getItem('token') === this.token) {
    //       // console.log('登录成功')
    //       this.$router.push('/')
    //     } else {
    //       // console.log('登录失败')
    //       alert('账号密码错误')
    //     }
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.login {
  .van-form {
    .register {
      display: flex;
      justify-content: space-between;
      .registers {
        margin-left: 10px;
        margin-top: 10px;
      }
      .forget {
        margin-right: 10px;
        margin-top: 10px;
      }
    }
  }
  h1 {
    text-align: center;
  }
}
</style>
